<!-- 此文件用来封装三级分类组件 -->
<!-- 用于后期直接使用 -->

<template>
  <el-form inline :disabled="disabled">
    <el-form-item label="一级分类">
      <!-- 绑定对应的值并进行展示 -->
      <el-select placeholder="请选择" v-model="CategoryStore.category1Id" @change="getCategory2">
        <el-option v-for="item1 in CategoryStore.category1List" :label="item1.name" :value="item1.id" :key="item1.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <!-- 绑定对应的值并进行展示 -->
      <el-select placeholder="请选择" v-model="CategoryStore.category2Id" @change="getCategory3">
        <el-option v-for="item2 in CategoryStore.category2List" :key="item2.id" :label="item2.name" :value="item2.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select placeholder="请选择" v-model="CategoryStore.category3Id">
        <!-- 绑定对应的值并进行展示 -->
        <el-option v-for="item3 in CategoryStore.category3List" :key="item3.id" :label="item3.name" :value="item3.id" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
// 导入 categoryStore 仓库
import usecategoryStore from '@/stores/categoryStore'
// import { storeToRefs } from 'pinia'

// 接收传递过来的数据
defineProps<{
  disabled: boolean
}>()

// 获取到仓库实例
const CategoryStore = usecategoryStore()

// const { category1List, category2List, category3List, category1Id, category2Id, category3Id } = storeToRefs(CategoryStore)

// 当一级下拉数据发生变化的时候进行调用
const getCategory2 = () => {
  // 调用store中声明好的actions方法
  CategoryStore.getcategory2List()
}
// 当二级下拉数据发生变化的时候进行调用
const getCategory3 = () => {
  // 调用store中声明好的actions方法
  CategoryStore.getcategory3List()
}
// 在组件完成挂载之后,请求数据

onMounted(() => {
  // 调用store仓库中actions方法
  CategoryStore.getcategory1List()
})
</script>

<style scoped></style>
